<template>
  <div class="fenlei">
    <van-nav-bar
      title="商品分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 侧边栏 -->
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        :title="item.name"
        v-for="(item, index) in list"
        :key="item._id"
        @click="activea(index)"
      />
      <!--商品信息  -->
      <div class="mokuai">
        <van-card @click="todetail(item._id)"
          v-for="item in shapping"
          :key="item._id"
          :num="item.quantity"
          :price="item.price"
          desc="描述信息"
          :title="item.name"
          :thumb="item.coverImg"
        />
      </div>
    </van-sidebar>
  </div>
</template>

<script>
import { reqfenleiapi, reqchafenleiapi } from "../../api/products";
export default {
  data() {
    return {
      activeKey: "0",
      list: [],
      arr: [],
      shapping: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取分类列表
    async reqfenlei() {
      console.log(this.activeKey);
      const result = await reqfenleiapi();
      console.log(result);
      this.list = result.categories;
      // console.log(this.list);
      // 显示默认分类商品
      const name = this.list[this.activeKey].name;
      console.log(name);
      const result1 = await reqchafenleiapi({ name });
      // console.log(result1);
      this.shapping = result1.products;
    },
    //显示侧边栏选中的样式
    async activea(index) {
      // console.log(index);
      this.activeKey = index;
      // console.log(this.activeKey);
      const name = this.list[index].name;
      console.log(name);
      const result = await reqchafenleiapi({ name });
      console.log(result);
       this.shapping = result.products;
    },
    //跳转到商品详情页面
    todetail(id){
      this.$router.push(`/detail/${id}`)
    }
  },
  created() {
    this.reqfenlei();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.mokuai {
  width: 84%;
  float: right;
  position: absolute;
  top: 47px;
  right: 0px;
  padding-bottom: 40px;
}
</style>
